<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/iconfont.css">
<style>
    form{       
        margin:auto;
        margin-top: 80px;
        width: 500px;
        
    }
    .hui{
        width: 200px;height: 100px;float:left;margin-left:200px;
        background: url(img/logo.jpg)no-repeat;
        
    }
    .hui>img{
        width: 100%;
        height: 100%;
    }
    #header {
  height: 36px;
  border-bottom: 1px solid #cdcdcd;
  box-sizing: border-box;
  line-height: 35px;
  background-color: #f5f5f5;
}
#header .header_left {
  height: 35px;
  float: left;
}
#header .header_left li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_left li div {
  width: 79px;
  color: #919191;
}
#header .header_left li div span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_left li div:hover {
  color: #ff8500;
}
#header .header_left li a {
  font-size: 12px;
  color: #919191;
}
#header .header_left li a:hover {
  color: #ff8500;
}
#header .header_right {
  height: 35px;
  float: right;
}
#header .header_right li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_right li span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_right li i {
  font-size: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
#header .header_right li a {
  font-size: 12px;
  color: #919191;
  vertical-align: middle;
}
#header .header_right li:hover {
  color: #ff8500;
}
#header .header_right li:hover a {
  color: #ff8500;
}
*{
    list-style: none;
}
.cantainer{
    width: 1200px;
    margin: 0 auto;
}
</style>
</head>
<body>
    <div id="header">
        <div class="cantainer">
            <ul class="header_left">
                <li>
                   <div>
                       中国大陆<span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <a href="#">亲，请登录</a>
                </li>
                <li>
                    <a href="#">免费注册</a>
                </li>
                <li>
                    <a href="#">手机逛淘宝</a>
                </li>
            </ul>
            <ul class="header_right">
                <li>
                   <div>
                       <a href="#">我的淘宝</a><span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <i class="iconfont icon-gouwuche-copy"></i><a href="#">购物车</a><span class="iconfont icon-icon"></span>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-start"></i><a href="#">收藏夹</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <a href="#">商品分类</a>
                </li>
                <li>
                    <div>
                        <a href="#">千牛卖家中心</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">联系客服</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-toggle"></i><a href="#">网站导航</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
            </ul>
        </div>    
    </div>
<div >
    <a class="hui"href="index.html">
        <img src="img/logo.jpg" alt="">
    </a>
</div>
<div class="h2"style="height:50px;line-height:70px">用户注册</div>
<form style="clear: both;">
    <div class="form-group">
        <label for="exampleInputEmail1">用户名</label>
        <input type="email" class="form-control" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="pass" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">确认密码</label>
        <input type="password" class="form-control" id="repass" placeholder="请再次输入密码">
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox" name="agree"> 同意协议
        </label>
    </div>
    <button type="button" class="btn btn-default">注册</button>
    <a href="login.html" style="float: right;margin-right: 30px;">
        登录
    </a>
</form>
</body>
<script src="./js/promiseAjax.js"></script>
<script type="text/javascript">

var btn = document.querySelector("button[type='button']");
btn.addEventListener("click",register);
function register(){
    // 协议
    var agree = document.querySelector("[name='agree']");
    if(!agree.checked){
        alert("请同意协议！！！");
        return;
    }
    // 获取用户名
    var username = document.querySelector("#username").value.trim();
    var password = document.querySelector("#pass").value.trim();
    pAjax({
        url:"./server/register.php",
        type:"post",
        data:{
            username:username,
            password:password,
        }
    }).then(function(res){
        // console.log(res);
        if(res.status==200){
            alert(res.msg);
            location.href = "login.html"
        }else{
            alert(res.msg);
            return;
        }
    });
}
</script>
</html>